import React, { lazy } from "react"
// Navigate重定向组件
import { Navigate } from "react-router-dom"

import Layout from "@/layout"
import Login from "@/views/Login"
// const Login = lazy(() => import("@/views/Login"))
const Home = lazy(() => import("@/views/Home"))
const About = lazy(() => import("@/views/About"))
const NotFount = lazy(() => import("@/views/404"))

const Page1 = lazy(() => import("@/views/Try/Page1"))
const Page2 = lazy(() => import("@/views/Try/Page2"))
const Page3 = lazy(() => import("@/views/Try/Page3"))
const Page4 = lazy(() => import("@/views/Try/Page4"))
const Page5 = lazy(() => import("@/views/Try/Page5"))
const Page6 = lazy(() => import("@/views/Try/Page6"))
const Page7 = lazy(() => import("@/views/Try/Page7"))
const Page8 = lazy(() => import("@/views/Try/Page8"))
const Page9 = lazy(() => import("@/views/Try/Page9"))
const Page10 = lazy(() => import("@/views/Try/Page10"))
const Page11 = lazy(() => import("@/views/Try/Page11"))
const Page12 = lazy(() => import("@/views/Try/Page12"))
const Page13 = lazy(() => import("@/views/Try/Page13"))
const Page14 = lazy(() => import("@/views/Try/Page14"))
const Page15 = lazy(() => import("@/views/Try/Page15"))
const Page16 = lazy(() => import("@/views/Try/Page16"))
const Page17 = lazy(() => import("@/views/Try/Page17"))


// 报错A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator.
// 懒加载的模式的组件的写法，外面需要套一层 Loading 的提示加载组件
const withLoadingComponent = (children: JSX.Element) => (
    <React.Suspense fallback={<div className="text-center">Loading...</div>}>
        {children}
    </React.Suspense>
)

const routes = [
    {
        path: "/",
        element: <Navigate to="/home" /> // 重定向
    },
    {
        path: "/",
        element: <Layout />,
        children: [
            {
                path: "/home",
                element: withLoadingComponent(<Home />)
            },
            {
                path: "/about",
                element: withLoadingComponent(<About />) 
            },
            {
                path: "/page1",
                element: withLoadingComponent(<Page1 />)
            },
            {
                path: "/page2",
                element: withLoadingComponent(<Page2 />)
            },
            {
                path: "/page3",
                element: withLoadingComponent(<Page3 />)
            },
            {
                path: "/page4",
                element: withLoadingComponent(<Page4 />)
            },
            {
                path: "/page5",
                element: withLoadingComponent(<Page5 />)
            },
            {
                path: "/page6",
                element: withLoadingComponent(<Page6 />)
            },
            {
                path: "/page7",
                element: withLoadingComponent(<Page7 />)
            },
            {
                path: "/page8",
                element: withLoadingComponent(<Page8 />)
            },
            {
                path: "/page9",
                element: withLoadingComponent(<Page9 />)
            },
            {
                path: "/page10",
                element: withLoadingComponent(<Page10 />)
            },
            {
                path: "/page11",
                element: withLoadingComponent(<Page11 />)
            },
            {
                path: "/page12",
                element: withLoadingComponent(<Page12 />)
            },
            {
                path: "/page13",
                element: withLoadingComponent(<Page13 />)
            },
            {
                path: "/page14",
                element: withLoadingComponent(<Page14 />)
            },
            {
                path: "/page15",
                element: withLoadingComponent(<Page15 />)
            },
            {
                path: "/page16",
                element: withLoadingComponent(<Page16 />)
            },
            {
                path: "/page17",
                element: withLoadingComponent(<Page17 />)
            },
        ]
    },
    {
        path: "/login",
        // element: withLoadingComponent(<Login />)
        element: <Login />
    },
    {
        path: "*",
        element: withLoadingComponent(<NotFount />)
    }
]

export default routes